<template>
  <layout :isShowDesc="false" id="layout">
    <view class="container">
      <view class="tui-page-title">找回密碼</view>
      <view class="tui-form">
        <view class="tui-view-input">
          <tui-list-cell :hover="false" :lineLeft="false" backgroundColor="#f3f3f3">
            <view class="tui-cell-input">
              <tui-icon name="mobile" color="#6d7a87" :size="20"></tui-icon>
              <input :adjust-position="false" :value="account" placeholder="请输入账号" placeholder-class="tui-phcolor" maxlength="11" @input="inputAccount" />
              <view class="tui-icon-close" v-show="account" @tap="clearInput(1)">
                <tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
              </view>
            </view>
          </tui-list-cell>
          <tui-list-cell :hover="false" :lineLeft="false" backgroundColor="#f3f3f3">
            <view class="tui-cell-input">
              <tui-icon name="shield" color="#6d7a87" :size="20"></tui-icon>
              <input :adjust-position="false" :value="code" placeholder="请输入验证码" placeholder-class="tui-phcolor" type="text" maxlength="36" @input="inputCode" />
              <view class="tui-icon-close" v-show="code" @tap="clearInput(3)">
                <tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
              </view>
              <view @click="countdown()" class="tui-btn-send" :class="{ 'tui-gray': isSend }" :hover-class="isSend ? '' : 'tui-opcity'" :hover-stay-time="150">{{ btnSendText }}</view>
            </view>
          </tui-list-cell>
          <tui-list-cell :hover="false" :lineLeft="false" backgroundColor="#f3f3f3">
            <view class="tui-cell-input">
              <tui-icon name="pwd" color="#6d7a87" :size="20"></tui-icon>
              <input :adjust-position="false" :value="password" placeholder="请输入新密码" :password="true" placeholder-class="tui-phcolor" type="text" maxlength="36" @input="inputPwd" />
              <view class="tui-icon-close" v-show="password" @tap="clearInput(2)">
                <tui-icon name="close-fill" :size="16" color="#bfbfbf"></tui-icon>
              </view>
            </view>
          </tui-list-cell>
        </view>
        <view class="tui-btn-box">
          <tui-button :disabledGray="true" :disabled="disabled" :shadow="true" shape="circle" @click="submit">確認修改</tui-button>
        </view>
      </view>
    </view>
  </layout>
</template>

<script>
import { mapMutations } from 'vuex';
import tuiListCell from '@/components/thorui/tui-list-cell/tui-list-cell';
import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
import tuiButton from '@/components/thorui/tui-button/tui-button';
import sha256 from 'sha256';
export default {
  computed: {
    disabled: function () {
      let bool = true;
      if (this.account && this.password && this.code) {
        bool = false;
      }
      return bool;
    },
  },
  components: {
    tuiListCell,
    tuiIcon,
    tuiButton,
  },
  data() {
    return {
      account: '',
      password: '',
      code: '',
      popupShow: false,
      codeSrc: '',
      isSend: false,
      btnSendText: '獲取驗證碼', //倒计时格式：(60秒)
      countDownTime: 60,
    };
  },
  created() {
    this.refreshCode();
  },
  methods: {
    ...mapMutations(['login', 'logout']),
    back() {
      uni.navigateBack();
    },
    inputAccount: function (e) {
      this.account = e.detail.value;
    },
    inputPwd: function (e) {
      this.password = e.detail.value;
    },
    inputCode: function (e) {
      this.code = e.detail.value;
    },

    // 清空输入框内容
    clearInput(type) {
      switch (type) {
        case 1:
          this.account = '';
          break;
        case 2:
          this.password = '';
          break;
        case 3:
          this.code = '';
          break;
        default:
          break;
      }
    },
    href(type) {
      let url = '/pages/login/forgetPwd/forgetPwd';
      if (type == 2) {
        url = '/pages/login/reg/reg';
      }
      this.tui.href(url);
    },

    refreshCode() {
      uni.$API.UserAuth.generateCode().then((res) => {
        this.codeSrc = 'data:image/png;base64,' + res.data;
      });
    },
    submit() {
      uni.$API.UserAuth.loginByUsername({
        id: this.account,
        password: sha256(this.password),
        code: this.code,
      }).then((res) => {
        if (res.status === 0) {
          uni.$co.Fun.showToast('登錄成功');
          uni.navigateBack({ delta: 1 });
        }
      });
    },
    countdown() {
      const countDownTimer = setTimeout(() => {
        if (this.countDownTime > 0) {
          this.countDownTime = this.countDownTime - 1;
          this.btnSendText = `${this.countDownTime}s重新獲取`;
          this.countdown();
        } else {
          this.btnSendText = '獲取驗證碼';
          this.countDownTime = 60;
          clearTimeout(countDownTimer);
        }
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.container {
  background: #fff;
  padding: 92rpx 80rpx 0 80rpx;
  height: 100vh;
  .tui-page-title {
    font-size: 52rpx;
    font-weight: bold;
    color: #42475f;
    line-height: 74rpx;
  }

  .tui-form {
    margin-top: 92rpx;
    .tui-list-cell {
      display: flex;
      align-items: center;
      height: 108rpx;
      width: 100%;
      border-radius: 54rpx;
      margin-bottom: 30rpx;
      &::after {
        border: 0;
      }
    }
    .tui-cell-input {
      padding-bottom: 0 !important;
    }
    .tui-view-input {
      width: 100%;
      box-sizing: border-box;

      .tui-cell-input {
        width: 100%;
        display: flex;
        align-items: center;
        padding-bottom: $uni-spacing-col-base;

        input {
          flex: 1;
          padding-left: $uni-spacing-row-base;
        }

        .tui-icon-close {
          margin-left: auto;
        }
      }
    }

    .tui-cell-text {
      width: 100%;
      box-sizing: border-box;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-grey;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 70rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #9ea2b4;
      line-height: 42rpx;
      .tui-color-primary {
        color: $uni-color-primary;
      }
    }

    .tui-btn-box {
      width: 100%;
      box-sizing: border-box;
      margin-top: 60rpx;
    }
    .tui-btn-send {
      height: 88rpx;
      line-height: 88rpx;
      padding-left: 24rpx;
      padding-right: 24rpx;
      font-size: 24rpx;
      background: #fff;
      font-weight: bold;
      color: #515cc3;
      border-radius: 54rpx;
    }
  }
  .icon {
    width: 150rpx;
    height: 150rpx;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    border-radius: 50%;
  }
}
</style>
